<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=1024">
<title>CDCCAM | Gallery</title>
<link rel="shortcut icon" href="img/icon.png" type="image/x-icon">
<link href="css/font-awesome.css" rel="StyleSheet" type="text/css"/>
<link href="css/style.css" rel="StyleSheet" type="text/css"/>
<link href="css/745.css" rel="StyleSheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jqueryui.js" ></script>
<script type="text/javascript" >
    $(document).ready(function(){
        function Slide(images){
            var img_label = ["name1","name2","name3","name4","name5","name6","name7","name8"];
            //$(".dcr-sld-namesp").append(name);
            var _slide = document.createElement("div");
            var _slide_pre = document.createElement("div");
            var _slide_thumbs = document.createElement("div");
            var _names = new Array();
            var _images = new Array();
            var _current_slide= 0 ;
            var _interval = null;
            
            _slide.addImage=function(image){_images.push(image);};
            
            $(_slide).attr("class","dcr-sld-h");
            $(_slide_pre).attr("class","dcr-sld-pre");
            $(_slide_thumbs).attr("class","dcr-sld-thumbs");
            
            $(_slide).append( _slide_pre ).append( _slide_thumbs );
            
            for(var i=0;i<images.length;i++){
                var thumb = document.createElement("div");
                var img = document.createElement("img");
                var names = document.createElement("div");
                $(names).attr("class","dcr-sld-namesp").text(img_label[i]);
                $(thumb).attr("class","dcr-sld-thumb").attr("sid",i).append(names).append(img).click(function(){
                    _current_slide=parseInt($(this).attr("sid"));
                    $(_slide_pre).find("img").toggle("slide",function(){
                        $(this).attr("src",images[_current_slide]).toggle("slide")
                    });
                    clearInterval(_interval);
                    _interval=setInterval(function(){animateSlide();},5000);
                });
                $(img).attr("src",images[i]);
                $(_slide_thumbs).append(thumb);
                if(i==0){
                    var pre_i = document.createElement("div");
                    var img = document.createElement("img");
                    $(img).attr("src",images[i]).attr("class","img");
                    $(pre_i).attr("class","dct-sld-i").append(img);
                    $(_slide_pre).append(pre_i);
                }
            }
            
            function animateSlide(){
                _current_slide=_current_slide>=(images.length-1)?0:(_current_slide+1);
                $(_slide_pre).find("img").toggle("fadeout",function(){
                    $(this).attr("src",images[_current_slide]).toggle("fadein")
                });
            }
            
            _slide.animate=function(){
                //_interval=setInterval(animateSlide(),1000);
                _interval=setInterval(function(){animateSlide();},5000);
            };
            _slide.stop=function(){clearInterval(_interval);};
            return _slide;
        }
        
        var images = ["img/sld1.jpg","img/sld2.jpg","img/sld3.jpg","img/sld4.jpg","img/sld5.jpg","img/sld6.jpg","img/sld7.jpg","img/sld8.jpg"];
        var slide = new Slide(images);
        $(".m-slide").append(slide);
        slide.animate();
        
        $(".cd-gallery-i").click(function(){
            var span = document.createElement("span");
            var img = document.createElement("img");
            $("#msg-h").css("position","fixed");
            ///$("#msg-h").css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) - 200 + "px");
            //$("#msg-h").css("left" , Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) - 480 + "px");
            $(span).attr("style","display: inline-block; padding: 5px; border-radius: 5px; background: rgba(250,250,250,0.7); ").append( img );
            $(img).attr("src",$(this).find("img").attr("href"));
            $(".cntn-overlay").show();
            $(".msg-h").html(span).slideDown().focus();
        });
        
        $(".cntn-overlay").click(function(){
            $(".msg-h").hide();
            $(this).hide();
        });
        
        $(".msg-h").click(function(){
            $(this).hide();
            $(".cntn-overlay").hide();
        });
    });
</script>
</head>
<body>
    <div class="dcr-lyr" >
        <!--<div class="lyr-fixed dcr-top" >
            <div class="dcr-phone" ><div class="fa fa-phone" style="padding: 0px 5px 0px 0px; font-size: 14px;"  ></div>855(0)12 97 8800488</div>
            <div class="dcr-email" ><div class="fa fa-envelope"  style="padding: 0px 5px 0px 0px;  font-size: 14px;" ></div>info@cdccam.com</div>
        </div>-->
        <div class="header">
        <div class="lyr-fixed dcr-lg-mnu" >
            <div class="dcr-logo" ><img src="img/logo.png" height="100%" style="display: inline-block;" /></div>
            <div class="dcr-mnu-src" >
                <div class="dcr-mnu" >
                    <div class="sc-fb fa fa-facebook-square" ></div>
                    <div class="sc-skp fa fa-skype" ></div>
                    <!--<div class="sc-yt fa fa-youtube-square" ></div>
                    <div class="sc-tw fa fa-twitter-square" ></div>
                    <div class="sc-gp fa fa-google-plus-square" ></div>-->
                </div>
                <div class="dcr-src" >
                    <input type="text" name="txtsearch" id="txtsearch" class="txtsearch" placeholder="Search ... " value="" />
                    <span class="search-icon fa fa-search" ></span>
                </div>
            </div>
        </div>
        </div>
        
    <div class="menus">
        <div class="dcr-mnus" >
            <div class="dcr-mnu-i" ><a href="index.html" >HOME</a></div>
            <div class="dcr-mnu-i" ><a href="about.html" >ABOUT US</a></div>
            <div class="dcr-mnu-i dcr-sub-mnu" >
                <a href="service.html" >SERVICE</a>
                <ul>
                    <li><a href="wwd.html#service" >What we do</a></li>
                    <li><a href="builtout.html#build-out" >BUILD-OUT</a></li>
                    <li><a href="restoration.html#restoration" >Restoration</a></li>
                    <li><a href="mfc.html#multi-family" >Multi-Family Construction</a></li>
                    <li><a href="flats.html#flates" >Flats</a></li>
                    <li><a href="townhouse.html#town-house" >Townhouses</a></li>
                    <li><a href="duplex.html#duplex" >Duplex</a></li>   
                </ul>
            </div>
            <div class="dcr-mnu-i" ><a class="active" href="gallery.html" >GALLERY</a></div>
            <div class="dcr-mnu-i" ><a href="contact.html" >CONTACT</a></div>        
        </div>
    </div>
    
    <div class="dcr-lyr" style="background: #000; " >
        <div class="lyr-fixed m-slide" ></div>
    </div>
    <div class="dcr-lyr" >
        <div class="lyr-fixed dcr-mn-cntn" >
            <div class="dcr-ls" >
                <div class="blk-info" style="width: 99%; padding: 0px 0.5%; " >
                    <h3 style="font-family: 'SWISSB'; font-size: 18px; color: #CF4E9D; " >Gallery</h3>
                    <div class="cd-gallery" >
                        <div class="cd-gallery-i" >
                            <img src="img/sld1.jpg" width="100%" href="img/sld1.jpg" />
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/sld2.jpg" width="100%" href="img/sld2.jpg" />
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/sld3.jpg" width="100%" href="img/sld3.jpg"  />
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/sld4.jpg" width="100%" href="img/sld4.jpg" />
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/sld5.jpg" width="100%" href="img/sld5.jpg" />
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/sld6.jpg" width="100%" href="img/sld6.jpg" />
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/sld7.jpg" width="100%" href="img/sld7.jpg" />
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/sld8.jpg" width="100%" href="img/sld8.jpg" />
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-1.jpg" width="100%" href="img/gallery-1.jpg" />
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-2.jpg" width="100%"  href="img/gallery-2.jpg"/>
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-3.jpg" width="100%" href="img/gallery-3.jpg" />
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-4.jpg" width="100%"  href="img/gallery-4.jpg"/>
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-5.jpg" width="100%"  href="img/gallery-5.jpg"/>
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-6.jpg" width="100%"  href="img/gallery-6.jpg"/>
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-7.jpg" width="100%"  href="img/gallery-7.jpg"/>
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-8.jpg" width="100%"  href="img/gallery-8.jpg"/>
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-9.jpg" width="100%"  href="img/gallery-9.jpg"/>
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-10.jpg" width="100%"  href="img/gallery-10.jpg"/>
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-11.jpg" width="100%"  href="img/gallery-11.jpg"/>
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-12.jpg" width="100%"  href="img/gallery-12.jpg"/>
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-13.jpg" width="100%"  href="img/gallery-13.jpg"/>
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-14.jpg" width="100%"  href="img/gallery-14.jpg"/>
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-15.jpg" width="100%"  href="img/gallery-15.jpg"/>
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-16.jpg" width="100%"  href="img/gallery-16.jpg"/>
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-17.jpg" width="100%"  href="img/gallery-17.jpg"/>
                        </div>
                        <div class="cd-gallery-i" >
                            <img src="img/small-gallery-18.jpg" width="100%"  href="img/gallery-18.jpg"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dcr-rs" style="border-left: 1px dashed #CCC; " >
                <h2 style="font-family: 'SWISSB'; font-size: 22px; margin: 2px 0px;" >Our products</h3>
                <ul>
                    <li><a href="wwd.html#service">What we do</a></li>
                    <li><a href="builtout.html#build-out">BUILD-OUT</a></li>
                    <li><a href="restoration.html#restoration">Restoration</a></li>
                    <li><a href="mfc.html#multi-family">Multi-Family Construction</a></li>
                    <li><a href="flats.html#flates">Flats</a></li>
                    <li><a href="townhouse.html#town-house">Townhouses</a></li>
                    <li><a href="duplex.html#duplex">Duplex</a></li>
                </ul>
            </div>
        </div>
        <div class="lyr-fixed dcr-footer" >
            <div class="drc-addr-term" >
                <div class="dcr-address" >
                Chaktumok D&eacute;cor &amp; Construction (Cambodia) Limited<br/>
                <span style="color: #999; font-size: 12px; " >
                Building #5C, St. 284 corner St. 163, Olympic,Chomkamorn, Phnom Penh, Cambodia.<br/> 
                Tel:  855(0)71 7644448 | 855(0)12 97 8800488 |  855(0)92 294800&nbsb;Email: info@cdccam.com
                </span>
                </div>
                <div class="dcr-term" ><a >Term of service</a> | <a >Privacy policy</a></div>
            </div>
            <div class="dcr-alr-mnu" >
                <div class="alr-dsn" >2014 All Rights researved. Designed By: ASDICT</div>
                <div class="alr-mnu" >
                    <div class="alr-mnu-i" ><a href="contact.html" >Contact</a></div>
                    <div class="alr-mnu-i" ><a href="gallery.html" class="active" >Gallery</a></div>
                    <div class="alr-mnu-i" ><a href="service.html" >Service</a></div>
                    <div class="alr-mnu-i" ><a href="about.html" >About</a></div>
                    <div class="alr-mnu-i" ><a href="index.html" >Home</a></div>
                </div>
            </div>
        </div>
    </div>
    <div class="cntn-overlay" ></div>
            <div class="msg-h" id="msg-h"></div>
</body>
</html>